<template>
	<view>
		<view class="bg">
			<view style="position: relative;">
				<view class="title">车辆维修</view>
				<image src="/static/wwc/left.png" mode=""
					style="width: 60rpx; height: 75rpx; position: absolute; left: 15rpx; top: 20rpx;"></image>
			</view>

			<uni-card class="mapContain" title="附近加油站" sub-title="根据您的位置推荐最近的加油站" extra="更多" :thumbnail="avatar"
				@click="onClick">
				<map :markers="mks" class="map" scale="15" :longitude="longitude" :latitude="latitude"
					@markertap="onMarkerTap" @callouttap="onCallOutTap"></map>
				<view style="color: black; margin-top: 20rpx;" v-if="mksContents.title != ''">
					<view style="display: flex; justify-content: space-between;">
						<!-- <view style="font-size: 16px;">商家:{{mksContents.title}}</view> -->
						<view style="font-size: 16px;">车百事汽车生活馆</view>
						<view>距离:{{distance}}米</view>
					</view>
					<view style="margin-bottom: 20rpx; display: flex; justify-content: space-between;">
						<view>
							<view style="display: flex;">
								<uni-rate :touchable="false" :value="5" @change="onChange" />
								<text>4分</text>
							</view>
							<view>信息:{{mksContents.info}}</view>
						</view>
						<image src="/static/muse.png" mode="" style="height: 100rpx; width: 200rpx;"></image>
					</view>

					<view style="display: flex; justify-content: space-between;">
						<button style="background-color: #2175f3; display: flex; align-items: center;">
							<image src="/static/wwc/电话@2x.png" style="width: 25rpx; height: 25rpx; margin: 0 20rpx;"
								mode=""></image>
							<text>联系门店</text>
						</button>
						<button @click="openPopup"
							style="background-color: #ff541b; display: flex; align-items: center;">
							<image src="/static/wwc/预约@2x.png" style="width: 25rpx; height: 25rpx; margin: 0 20rpx;"
								mode=""></image>
							<text>立即预订</text>
						</button>

						<uni-popup ref="popupRef" type="bottom" background-color="#fff" :border-radius="'10px 10px 0 0'">
							<view style="text-align: center;">
								<view style="padding: 20rpx 0; border-bottom: 0.5px solid #f2f2f2;">18640589156</view>
								<view style="padding: 20rpx 0; border-bottom: 0.5px solid #f2f2f2;">复制</view>
								<view style="padding: 20rpx 0;">取消拨号</view>
							</view>
						</uni-popup>
						
					</view>

				</view>
			</uni-card>

		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';

	const popupRef = ref(null);
	const openPopup = ()=>{
		popupRef.value.open('bottom')
	}
	
	
	const mksContents = ref({
		title: '',
		info: '',

	})

	const distance = ref(0);

	const onMarkerTap = (e) => {
		console.log(e)
		mksContents.value = mks.value.find(obj => obj.id ===
			e.detail.markerId);
		console.log(mksContents.value);

		const lat1 = latitude.value; // 自己的纬度
		const lon1 = longitude.value; // 自己的经度
		const lat2 = e.detail.latitude; // 上海的纬度
		const lon2 = e.detail.longitude; // 上海的经度
		console.log(lat1);
		console.log(lon1);
		console.log(lat2)
		console.log(lat2)
		distance.value = calculateDistanceInMeters(lat1, lon1, lat2, lon2).toFixed(2);
	}

	function calculateDistanceInMeters(lat1, lon1, lat2, lon2) {
		const R = 6371000; // 地球半径，单位：米    结果为：米
		//const R = 6371;  // 地球半径，单位：公里   结果为：公里
		const dLat = degToRad(lat2 - lat1);
		const dLon = degToRad(lon2 - lon1);
		const a =
			Math.sin(dLat / 2) * Math.sin(dLat / 2) +
			Math.cos(degToRad(lat1)) * Math.cos(degToRad(lat2)) *
			Math.sin(dLon / 2) * Math.sin(dLon / 2);
		const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
		return R * c; // 距离，单位：米
	}
	// 辅助函数：将角度转换为弧度
	function degToRad(deg) {
		return deg * (Math.PI / 180);
	}


	const mks = ref([{
			id: 999,
			latitude: 34.826128,
			longitude: 113.558902,
			width: 25,
			height: 25,
			iconPath: '/static/dw.png',
			callout: { // 自定义一直显示的数据，自己的定位信息
				content: "附近门店>",
				color: "#fff",
				bgColor: '#000',
				borderRadius: 10,
				padding: 10,
				display: "ALWAYS",
			}
		},
		{
			id: 1,
			latitude: 34.826622,
			longitude: 113.556722,
			iconPath: '/static/dw.png',
			title: '商家A',
			info: '地址A, 评分4.5' // 自定义信息
		},
		{
			id: 2,
			latitude: 34.824521,
			longitude: 113.557732,
			iconPath: '/static/dw.png',
			title: '商家B',
			info: '地址B, 评分4.5' // 自定义信息
		},
		{
			id: 3,
			latitude: 34.827359,
			longitude: 113.557851,
			iconPath: '/static/dw.png',
			title: '商家C',
			info: '地址C, 评分4.5' // 自定义信息
		},
		{
			id: 4,
			latitude: 34.827537,
			longitude: 113.560137,
			iconPath: '/static/dw.png',
			title: '商家D',
			info: '地址D, 评分4.5' // 自定义信息
		}
	])


	const longitude = ref('34.826128');
	const latitude = ref('83.558902');

	const getMyLocation = () => {
		uni.getLocation({
			success(res) {
				console.log(res)
				longitude.value = res.longitude;
				latitude.value = res.latitude;
			}
		})
	}

	// function chose() {

	// 	// #ifdef H5
	// 	navigator.geolocation.getCurrentPosition(
	// 		position => {
	// 			console.log(position.coords.latitude,
	// 				position.coords.longitude);
	// 			// 处理获取到的位置信息
	// 		},
	// 		error => {
	// 			console.error(error);
	// 			// 处理错误
	// 		}
	// 	);
	// 	// #endif

	// 	console.log(666)
	// 	// #ifndef H5
	// 	uni.chooseLocation({
	// 		success(r) {
	// 			console.log(666);
	// 			console.log(r);
	// 		}
	// 	})
	// 	// #endif

	// }

	onLoad(() => {
		getMyLocation();
	})
</script>

<style scoped>
	.bg {
		height: 400rpx;
		background-color: #3184fc;
	}

	.title {
		padding-top: 20rpx;
		font-size: 20px;
		color: white;
		padding-bottom: 20px;
		text-align: center;
	}

	.back {
		font-size: 20px;
		color: white;
	}

	.map {
		width: 100%;
		height: 650rpx;
	}

	button {
		width: 250rpx;
		font-size: 13px;
		color: white;
		border-radius: 100px;
	}
</style>